<template>
	<view class="box">
		<view class="box-header">
			<view class="avater-grade">
				<view class="left">
					<image class="avatar" :src="userInfo.avatarUrl" mode=""></image>
					<view class="nickName">
						{{userInfo.nickName}}
					</view>
				</view>
			</view>
			<view class="right">
				<text class="grade">Lv.{{ workHour | gradeFilter}}</text>
			</view>
			<view class="progress">
				距离下一个等级还差<text style="color: red;">{{ workHour | nextGradeHourLength }}</text>个志愿时长
			</view>
			<view class="progress-bar">
				<u-line-progress :percentage="percentage" :showText="false" activeColor="rgba(180, 195, 250, 1)"></u-line-progress>
				<view class="progress-bar-grade">
					<view>
						<text class="progress-bar-current-grade">Lv.{{ workHour | gradeFilter}}</text>
					</view>
					<view>
						<text class="progress-bar-next-grade">Lv.{{(workHour | gradeFilter) + 1}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 志愿者权益 -->
		<view class="box-body">
			<text class="txt">志愿者权益</text>
			<view class="user-rights">
				<view class="user-rights-item">
					<image src="../../static/images/grade-1.png" mode="aspectFill"></image>
					<view class="txt">
						成长
					</view>
				</view>
				<view class="user-rights-item">
					<image src="../../static/images/grade-2.png" mode="aspectFill"></image>
					<view class="txt">
						校园
					</view>	
				</view>
				<view class="user-rights-item">
					<image src="../../static/images/grade-3.png" mode="aspectFill"></image>
					<view class="txt">
						公共服务
					</view>
				</view>
				<view class="user-rights-item">
					<image src="../../static/images/grade-4.png" mode="aspectFill"></image>
					<view class="txt">
						事业
					</view>
				</view>
			</view>
		</view>

		<!-- 升级标准 -->
		<view class="box-bottom">
			<text class="txt">评级标准</text>
			<view class="assessment-criteria">
				<view class="assessment-criteria-item-right">
					<view class="assessment-criteria-item-top">
						<text class="text">用户等级(Lv)</text>
					</view>
					<view class="assessment-criteria-item-list">Lv.1</view>
					<view class="assessment-criteria-item-list">Lv.2</view>
					<view class="assessment-criteria-item-list">Lv.3</view>
					<view class="assessment-criteria-item-list">Lv.4</view>
					<view class="assessment-criteria-item-list">Lv.5</view>
					<view class="assessment-criteria-item-list">Lv.6</view>
					<view class="assessment-criteria-item-list">Lv.7</view>
					<view class="assessment-criteria-item-list">Lv.8</view>
					<view class="assessment-criteria-item-list">Lv.9</view>
				</view>
				<view class="assessment-criteria-item-left">
					<view class="assessment-criteria-item-top">
							<text class="text">志愿时长(小时)</text>
						</view>
						<view class="assessment-criteria-item-list">10</view>
						<view class="assessment-criteria-item-list">30</view>
						<view class="assessment-criteria-item-list">60</view>
						<view class="assessment-criteria-item-list">100</view>
						<view class="assessment-criteria-item-list">150</view>
						<view class="assessment-criteria-item-list">210</view>
						<view class="assessment-criteria-item-list">270</view>
						<view class="assessment-criteria-item-list">330</view>
						<view class="assessment-criteria-item-list">390</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				workHour: 0,
				percentage: 0,
			};
		},
		methods: {


		},
		computed:{
			percentage(){
				return 100-((workHour/nextGradeHourLength)/nextGradeHourLength*100)
			}
		},

		filters: {
			//等级过滤器
			gradeFilter(value) {
				if (value >= 0 && value < 10) {
					return 0
				} else if (value <= 30) {
					return 1
				} else if (value <= 60) {
					return 2
				} else if (value <= 100) {
					return 3
				} else if (value <= 150) {
					return 4
				} else if (value <= 210) {
					return 5
				} else if (value <= 270) {
					return 6
				} else if (value <= 350) {
					return 7
				} else if (value <= 440) {
					return 8
				} else {
					return 9
				}
			},
			
		

			//距离下一等级所需要志愿者时长
			nextGradeHourLength(value) {
				if (value >= 0 && value < 10) {
					return 10 - value
				} else if (value <= 30) {
					return 30 - value
				} else if (value <= 60) {
					return 60 - value
				} else if (value <= 100) {
					return 100 - value
				} else if (value <= 150) {
					return 150 - value
				} else if (value <= 210) {
					return 210 - value
				} else if (value <= 270) {
					return 270 - value
				} else if (value <= 350) {
					return 350 - value
				} else if (value <= 440) {
					return 440 - value
				} else {
					return 100
				}
			}
		},


		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.workHour = uni.getStorageSync("user").workHour
		}


	}
</script>

<style lang="scss">
	.box {
		.box-header {
			margin-top: 32rpx;
			margin-left: 32rpx;
			width: 686rpx;
			height: 290rpx;
			border-radius: 8px;
			background: linear-gradient(135.95deg, rgba(90, 138, 248, 1) 0%, rgba(117, 153, 247, 1) 35.83%, rgba(154, 160, 248, 1) 69.17%, rgba(196, 196, 250, 1) 100%);
			box-shadow: 0px 4px 28px 0px rgba(23, 42, 99, 0.15);
			position: relative;
			.avater-grade {
				position: absolute;	
				display: flex;
				margin-left: 32rpx;
				margin-top: 32rpx;
				height: 96rpx;
				// width: 624rpx;
				.left {
					display: flex;
					
					.avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						border: 4rpx solid #ffffff;
					}
					.nickName {
						margin-top: 32rpx;
						margin-left: 16rpx;
						height: 46rpx;
						font-size: 32rpx;
					}
				}
			}
			.right {
				position: absolute;
				min-width: 80rpx;
				height: 56rpx;
				margin-top: 52rpx;
				right:32rpx;
				// margin-left: 580rpx;
				.grade{
					font-size: 40rpx;
					font-weight: 600;
					line-height: 56rpx;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;
				}
			}
			.progress {
				position: absolute;
				width: 366rpx;
				height: 34rpx;
				margin-top: 152rpx;
				margin-left: 32rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 34rpx;
				color: rgba(245, 245, 245, 1);
				text-align: left;
				vertical-align: top;
			}
			.progress-bar{
				.u-line-progress{
					position: absolute;
					left: 32rpx;
					top: 194rpx;
					width: 622rpx;
					height: 16rpx;
					border-radius: 4px;
				}
				.progress-bar-grade {
					position: absolute;
					left: 32rpx;
					top: 213rpx;
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					.progress-bar-next-grade {
						position: absolute;
						left: 566rpx;
					}
					
				}
			}
		}

		.box-body {
			padding: 40rpx;
			margin: 20rpx;

			.txt {
				font-size: 32rpx;
				font-weight: 600;
				line-height: 45rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}
			.user-rights {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-around;

				.user-rights-item {
					left: 54rpx;
					top: 640rpx;
					image {
						width: 88rpx;
						height: 88rpx;
					}

					.txt {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(0, 0, 0, 1);
						text-align: center;
						vertical-align: top;
					}
				}
			}
		}

		.box-bottom {
			margin-left: 32rpx;
			.txt {
				font-size: 32rpx;
				font-weight: 600;
				line-height: 45rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.assessment-criteria {
				display: flex;
				margin-top: 30rpx;
				width: 686rpx;
				.assessment-criteria-item-top {
					width: 340rpx;
					height: 64rpx;
					border-radius: 4px 0px, 0px, 0px;
					background: rgba(108, 132, 203, 1);
					text-align: center;
					vertical-align: center;
					.text {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 64rpx;
						color: rgba(255, 255, 255, 1);
					}
				}
				.assessment-criteria-item-list{
					width: 340rpx;
					height: 56rpx;
					text-align: center;
					vertical-align: center;
					background: rgba(222, 228, 244, 1);	
					font-size: 28rpx;
					font-weight: 400;
				}
				.assessment-criteria-item-left{
					margin-left: 6rpx;
				}
			}
		}
	}
</style>
